<template>
  <div class="photo">
    <img
      class="mx-8"
      width="440"
      height="320"
      src="./img/人员标签情况.png"
    />
    <span
      style="top: -390px; left: -620px; font-size: 20px"
      class="position-re d-flex flex-column align-center white--text pa-2"
    >
      {{ count }}
    </span>
    <span
      style="top: -360px; left: -620px; font-size: 20px"
      class="position-re d-flex flex-column align-center white--text pa-2"
    >
      {{ count }}
    </span>
    <span
      style="top: -335px; left: -620px; font-size: 20px"
      class="position-re d-flex flex-column align-center white--text pa-2"
    >
      {{ count }}
    </span>
    <span
      style="top: -310px; left: -620px; font-size: 20px"
      class="position-re d-flex flex-column align-center white--text pa-2"
    >
      {{ count }}
    </span>
    <span
      style="top: -280px; left: -620px; font-size: 20px"
      class="position-re d-flex flex-column align-center white--text pa-2"
    >
      {{ count }}
    </span>
    <span
      style="top: -620px; left: -385px; font-size: 20px"
      class="position-re d-flex flex-column align-center white--text pa-2"
    >
      {{ title }}
    </span>
    <span
      style="top: -590px; left: -385px; font-size: 20px"
      class="position-re d-flex flex-column align-center white--text pa-2"
    >
      {{ title }}
    </span>
    <span
      style="top: -560px; left: -385px; font-size: 20px"
      class="position-re d-flex flex-column align-center white--text pa-2"
    >
      {{ title }}
    </span>
    <span
      style="top: -530px; left: -385px; font-size: 20px"
      class="position-re d-flex flex-column align-center white--text pa-2"
    >
      {{ title }}
    </span>
    <span
      style="top: -500px; left: -385px; font-size: 20px"
      class="position-re d-flex flex-column align-center white--text pa-2"
    >
      {{ title }}
    </span>

  </div>
</template>
<script>
export default {
  doc: {
    name: "人员标签状况",
    desc: `简单布局，稍后优化`,
  },
  props: {
    title: {
      type: String,
      default: "",
    },

    count: {
      type: Number,
      default: undefined,
    },
  },
  computed: {
    countLeft() {
      return (title, count) => {
        // 数字初始位置
        let res = 1.5;
        let titleLenArr = this.getByteLen(title);
        let countLenArr = this.getByteLen(count + "");
        // 标题长度自增
        res += titleLenArr[0] * 1.27 + titleLenArr[1] * 0.72;
        // 数字长度自增
        res += countLenArr[0] * 1.27 + countLenArr[1] * 0.9;
        return res;
      };
    },
  },
  methods: {
    getByteLen(val) {
      let res = [0, 0];
      for (var i = 0; i < val.length; i++) {
        var a = val.charAt(i);
        // eslint-disable-next-line no-control-regex
        if (a.match(/[^\x00-\xff]/gi) != null) {
          res[0] = res[0] + 1;
        } else {
          res[1] = res[1] + 1;
        }
      }
      return res;
    },
  },
};
</script>
<style lang="scss" scoped>
</style>